<template>
	<div class="system-add-dept-container">
		<el-dialog title="延期设置" v-model="state.isShowDialog" width="400px" draggable>
			<el-form ref="dialogFormRef" :model="state.ruleForm" size="default" label-width="60px" :rules="rules">
				<el-row :gutter="35">
					<el-col :xs="23" :sm="23" :md="23" :lg="23" :xl="23" class="mb20">
						<el-form-item label="延期" prop="extension">
							<el-input v-model="state.ruleForm.extension" placeholder="请输入正整数" class="input-with-select">
								<template #append>
									<el-select v-model="state.ruleForm.type" placeholder="请选择" style="width: 60px">
										<el-option label="天" value="day" />
										<el-option label="月" value="month" />
										<el-option label="年" value="year" />
									</el-select>
								</template>
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" size="default">取 消</el-button>
					<el-button type="primary" @click="onSubmit" size="default">确 认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemComputerDialog">
// 后台接口
import { systemApi } from '/@/api/system/index';
const rules = reactive({
	extension: [{
		required: true,
		validator: (rule: any, value: any, callback: any) => {
			if (/^(?:[1-9]\d*)$/.test(value) == false) {
				callback(new Error("请输入正整数"));
			} else {
				callback();
			}
		}, 
		trigger: 'blur' 
	}],
});
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const dialogFormRef = ref();
const state = reactive({
	isShowDialog: false,
	ruleForm: {
		selectIds: <any>[],
		extension: '', // 延期
		type: 'day', // 类型
	},
});
// 打开添加弹窗
const openDialog = (selectIds: string[]) => {
	console.log(999,selectIds);
	state.isShowDialog = true;
	nextTick(() => {
		dialogFormRef.value.resetFields();  // 清空表单并移除校验结果，此项需加表单验证才能使用
		state.ruleForm = {
			selectIds: selectIds,
			extension: '', // 延期
			type: 'day', // 类型
		}
	})
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 确定
const onSubmit = async () => {
	// 表单验证
	await dialogFormRef.value?.validate(async (valid: any) => {
		if (valid) {
			// 保存到数据库
			let res: any = await systemApi().extensionComputer(state.ruleForm);
			if (res.success) {
				emit('refresh')
				ElMessage.success('操作成功');
			} else {
				ElMessage.error('操作失败');
			}
			closeDialog();
		}
	});
};


// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
:deep(.el-input-number .el-input__inner){
	text-align: left;
}
// 修改日期选择控件el-date-picker宽度为100%自适应
:deep(.el-input__wrapper){
  width: 100% !important;
}
</style>
